<template>
    <div class="amap-page-container">
        <el-amap
                vid="amapDemo"
                :center=this.center
                :zoom="zoom"
                class="amap-demo">
            <el-amap-marker
                    v-for="(marker,index) in markers" :key="index"
                    :position="marker.position"
                    :title="marker.name"
                    :events="marker.events"
            >
            </el-amap-marker>
            <el-amap-info-window style="min-weight: 300px;height: 200px" :position="window.position"
                                 :visible="window.visible">
                <div style="margin-left: 8px">社区详情</div>
                <div v-for="(item, index) in window.msg" :key="index"
                     style="padding: 6px 8px 2px;line-height:18px !important;font-size:14px !important;color: #000;">
                    {{item}}
                </div>
                <el-button type="primary" size="mini" @click="dianji(window.info)" style="margin-left: 8px;margin-top: 6px;">查看详情
                </el-button>
            </el-amap-info-window>

            <!-- 详情弹出框 -->
            <el-dialog title="社区详情" :visible.sync="dialogFormVisible" width="550px">
                <el-form :model="windows" class="ml100" label-width="120px">
                    <el-form-item label="社区名称：">
                        <div class="content">{{windows.name}}</div>
                    </el-form-item>
                    <el-form-item label="社区主任：">
                        <div class="content">{{windows.director}}</div>
                    </el-form-item>
                    <el-form-item label="社区地址：">
                        <div class="content">{{windows.address}}</div>
                    </el-form-item>
                    <el-form-item label="社区类型：">
                        <div class="content">{{windows.type}}</div>
                    </el-form-item>
                    <el-form-item label="社区四至：">
                        <div class="content">{{windows.sz}}</div>
                    </el-form-item>
                    <el-form-item label="社区面积：">
                        <div class="content">{{windows.measure_area}}</div>
                    </el-form-item>
                    <el-form-item label="辖区范围：">
                        <div class="content">{{windows.scope}}</div>
                    </el-form-item>
                    <el-form-item label="实有户数：">
                        <div class="content">{{windows.household_num}}</div>
                    </el-form-item>
                    <el-form-item label="户籍数量：">
                        <div class="content">{{windows.household_register_num}}</div>
                    </el-form-item>
                    <el-form-item label="民族情况：">
                        <div class="content">{{windows.ethnic_situation}}</div>
                    </el-form-item>
                    <el-form-item label="男性人数：">
                        <div class="content">{{windows.male_num}}</div>
                    </el-form-item>
                    <el-form-item label="女性人数：">
                        <div class="content">{{windows.female_num}}</div>
                    </el-form-item>
                    <el-form-item label="年龄段人数：">
                        <div class="content">{{windows.agegroup_num}}</div>
                    </el-form-item>
                    <el-form-item label="弱势群体人数：">
                        <div class="content">{{windows.weakness_num}}</div>
                    </el-form-item>
                    <el-form-item label="建设时间：">
                        <div class="content">{{windows.construction_time}}</div>
                    </el-form-item>
                    <el-form-item label="筹备历史：">
                        <div class="content">{{windows.preparatory_history}}</div>
                    </el-form-item>
                    <el-form-item label="获得荣誉：">
                        <div class="content">{{windows.gethonor}}</div>
                    </el-form-item>
                    <el-form-item label="历史故事：">
                        <div class="content">{{windows.historical_stories}}</div>
                    </el-form-item>
                    <el-form-item label="社区名人：">
                        <div class="content">{{windows.celebrities}}</div>
                    </el-form-item>
                    <el-form-item label="人文特色：">
                        <div class="content">{{windows.characteristics}}</div>
                    </el-form-item>
                    <el-form-item label="社区特色：">
                        <div class="content">{{windows.sqcharacteristics}}</div>
                    </el-form-item>
                    <el-form-item label="区域特色：">
                        <div class="content">{{windows.qycharacteristics}}</div>
                    </el-form-item>
                </el-form>
                <div style="width: 160px; margin-left: 420px">
                    <el-button type="primary" @click="dialogFormVisible = false">关闭</el-button>
                </div>
            </el-dialog>
        </el-amap>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                center: [123.38, 41.8],
                zoom: 12,
                markers: [],
                windows: {},
                window: {
                    position: [0, 0],
                    visible: false,
                },
                dialogFormVisible: false,
            }
        },
        methods: {
            async init() {

                let markers = [];
                let windows = [];

                let self = this;

                const res = await this.$http('infolist')

                for (let i = 0; i < res.length; i++) {
                    markers.push({
                        position: [res[i].longitude, res[i].latitude],
                        name: res[i].name,
                        events: {
                            click: () => {
                                this.clickPoint(res[i]);
                            }
                        }
                    });
                }
                this.markers = markers;


            },
            async dianji(parme) {
                this.dialogFormVisible = true
                this.windows = parme
                console.log('aaa')
                console.log(parme)
            },

            clickPoint(item) {
                console.log(item);

                let msg = [];
                msg.push('社区名称：' + item.name);
                msg.push('社区主任：' + item.director);
                msg.push('社区地址：' + item.address);

                this.window.position = [item.longitude, item.latitude];
                this.window.msg = msg;
                this.window.info = item;

                console.log(this.window.info);

                this.window.visible = false;
                this.$nextTick(() => {
                    this.window.visible = true;
                });
            },


        },
        mounted() {
            this.init();
        },

    }
</script>

<style scoped>
    .amap-demo {
        height: 500px;
    }

    .content {
        color: blue;
    }
</style>


